<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>首页</title>
    </head>

    <body class="index">
        <!-- 主体部分 -->
        <main class="main">
            <!-- 横幅轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slider1"></div>
                    <div class="swiper-slide slider2"></div>
                    <div class="swiper-slide slider3"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>

            <section class="main1">
                <div class="rank">今日排名 <span id="rankNum">6</span></div>

                <div class="clockin">
                    累计打卡<span id="clockNum">2</span>天
                    <button type="button" id="clockBtn">今日打卡</button>
                </div>
            </section>

            <section class="main2">
                <a href="#" class="sports-data">运动数据</a>

                <div class="badge">
                    累计运动徽章<span id="badgeNum">2</span>枚
                </div>
            </section>

            <section class="main3">
                <a href="#">课程训练</a>
            </section>

            <section class="main4">
                <a href="#">户外跑步</a>
            </section>
        </main>

        <!-- 底部导航 tabbar -->
        <nav class="tabbar"></nav>
    </body>

</html>